<template>
  <div
    class="flex flex-col bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] p-10px"
  >
    <div class="flex justify-between items-center">
      <div> <el-image :src="icon" class="w-48px h-48px" /> </div>
      <div class="flex flex-col items-center">
        <div class="flex items-baseline justify-end text-gray-500">
          <span>{{ title }}</span>
          <el-popover :width="200" trigger="hover" :content="tips">
            <template #reference>
              <Icon icon="ep:warning" :size="14" />
            </template>
          </el-popover>
        </div>
        <div class="flex flex-row items-baseline justify-end w-100%">
          <CountTo
            :prefix="prefix"
            :end-val="Number(value)"
            :decimals="decimals"
            class="text-2xl meton-num-font-family"
          />
        </div>
      </div>
    </div>

    <el-divider class="mb-1! mt-2!" />
    <div class="flex flex-row items-center text-sm">
      <span class="text-gray-500">昨日:</span>
      <span>{{ prefix || '' }}{{ yesterdayValue }}</span>
    </div>
    <div class="flex flex-row items-center justify-between text-sm">
      <div class="flex items-center">
        日环比:{{ dayChain }}% <el-image :src="equle" v-if="dayTrend == 0" class="w-14px h-14px" />
        <el-image :src="up" v-if="dayTrend == 1" class="w-14px h-14px" />
        <el-image :src="down" v-if="dayTrend == 2" class="w-14px h-14px" />
      </div>
      <div class="flex items-center">
        月环比:{{ monthChain }}%
        <el-image :src="equle" v-if="monthTrend == 0" class="w-14px h-14px" />
        <el-image :src="up" v-if="monthTrend == 1" class="w-14px h-14px" />
        <el-image :src="down" v-if="monthTrend == 2" class="w-14px h-14px" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import down from '@/assets/imgs/home/down.png'
import up from '@/assets/imgs/home/up.png'
import equle from '@/assets/imgs/home/equle.png'
/** 交易对照卡片 */
defineOptions({ name: 'ComparisonCard' })

defineProps({
  title: propTypes.string.def('').isRequired,
  tips: propTypes.string.def(''),
  prefix: propTypes.string.def(''),
  value: propTypes.any.def(0).isRequired,
  decimals: propTypes.number.def(0),
  yesterdayValue: propTypes.any.def(0),
  monthValue: propTypes.any.def(0),
  dayChain: propTypes.number.def(0),
  dayTrend: propTypes.number.def(0),
  monthChain: propTypes.number.def(0),
  monthTrend: propTypes.number.def(0),
  icon: propTypes.string.def('')
})
</script>
